<template>
    <div class="menu_left">
        <div class="myheader_left">
            <div style="display: flex; align-items: center; height: 100%">
                <img
                    src="../assets/img/login_bg.png"
                    alt=""
                    style="width: 35px; height: 35px"
                />
                <span
                    style="
                        display: block;
                        height: 45%;
                        width: 1px;
                        background-color: #c0c0c0;
                        margin: 0 12px;
                    "
                ></span>
                <span style="font-size: 17px; color: #333">短视达人后台</span>
            </div>
        </div>
        <el-menu :default-active="$route.name" class="el-menu-vertical-demo">
            <!-- 遍历一级菜单 -->
            <template v-for="route in homeChildrenRoutes" :key="route.name">
                <!-- 如果没有子菜单，直接渲染el-menu-item -->
                <el-menu-item
                    v-if="!route.children || !route.children.length"
                    :index="route.path"
                    @click="handleMenuItemClick(route)"
                >
                    {{ route.meta?.title }}
                </el-menu-item>

                <!-- 如果有子菜单，渲染一个el-sub-menu -->
                <el-sub-menu v-else :index="route.path">
                    <template #title>
                        <span>{{ route.meta?.title }}</span>
                    </template>
                    <!-- 遍历渲染出所有子菜单 -->
                    <template v-for="child in route.children" :key="child.name">
                        <el-menu-item
                            v-if="child.meta"
                            :index="child.path"
                            @click="handleMenuItemClick(child)"
                        >
                            {{ child.meta?.title }}111
                        </el-menu-item>
                    </template>
                </el-sub-menu>
            </template>
        </el-menu>
    </div>
</template>

<script lang="ts" setup>
import { useRoute, useRouter } from "vue-router";
import homeChildrenRoutes from "../router/data";
import { onMounted } from "vue";

onMounted(() => {
    console.log(onMounted);
});

const router = useRouter();
const route = useRoute();

const handleMenuItemClick = (route: any) => {
    // 如果这个路由项是一个子路由，我们需要构建完整的路径
    if (route.meta && route.meta.parentPath) {
        router.push({ path: route.meta.parentPath + "/" + route.path });
    } else {
        console.log(route.path);
        // 否则，它就是一个顶级路由，我们可以直接使用它的路径
        router.push({ path: "/" + route.path });
    }
};
</script>

<style lang="scss" scoped>
.menu_left {
    width: 200px;
    height: 100%;
    box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.1);
    background-color: #fff;
    z-index: 6;
}

.myheader_left {
    height: 60px;
    width: 100%;
    display: flex;
    align-items: center;
    padding-left: 20px;
    box-sizing: border-box;
}

.el-menu-vertical-demo {
    width: 200px !important;
    height: calc(100% - 60px);
    overflow-y: auto;
    transition: all 0.5s;
}

.el-menu-vertical-demo::-webkit-scrollbar {
    width: 0 !important;
}

.el-menu-vertical-demo {
    overflow: -moz-scrollbars-none;
    border: none;
}

.miniWitdh {
    width: 70px !important;
    transition: all 0.5s;
}

:deep(.el-menu-item-group__title) {
    display: none;
}

:deep(.el-submenu__title i) {
    color: rgb(165, 172, 179);
}

:deep(.el-submenu__title) {
    color: rgb(165, 172, 179);
}

:deep(.el-submenu) {
    .el-menu-item {
        position: relative;
        // background-color: #161d31 !important;
        padding-left: 55px !important;

        &:hover {
            background-color: #f6f6f6 !important;

            &::after {
                opacity: 1;
            }
        }

        &:after {
            content: "";
            position: absolute;
            right: 0;
            width: 5px;
            background-color: #4f46e5 !important;
            height: 100%;
            opacity: 0;
        }
    }

    .is-active {
        position: relative;
        background-color: rgba(36, 153, 239, 0.06) !important;

        &::after {
            opacity: 1;
        }
    }
}

:deep(.el-submenu__icon-arrow) {
    color: rgb(165, 172, 179) !important;
}

.clearboth:after {
    width: 0 !important;
}

:deep(.is-active .clearcolor .el-submenu__title) {
    color: #fff;
}

:deep(.is-active .is-active .el-submenu__title) {
    color: #fff;
}
</style>